﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--fieldset：对表单元素进行编组-->
    <fieldset>
        <!--legend：可以为fieldset添加说明标签-->
        <legend>用户信息</legend>
        <!-- 创建一个表单-->
        <!-- enctype="application/x-www-form-urlencoded"  常规编码方式，一般提交文本信息时使用
            enctype="multipart/form-data" 需要上传图片、文件时
            enctype="text/plain" 将编码方式交给浏览器，不同的浏览器编码的方式不用
            autocomplete="on" 控制表单自动完成功能-->
        <form action="form.html" method="get" enctype="text/plain" autocomplete="on" target="_blank" name="userinfo_form">
            姓名：<input name="user" autofocus/><!--autofocus:自动聚焦，只能放在input中，且只能在一个input中-->
            <!--disabled:可以对整组控件禁用，禁用之后效果变成灰色-->
            <fieldset disabled>
                <legend>按钮</legend>
               <!-- <button>提交按钮</button>  -->
                <button type="button">普通按钮</button>
				<button type="submit">submit</button>
            </fieldset>
        </form>
    </fieldset>

    <form action="" method="get">
        <!-- type属性的默认值是text，readonly value="zhangsan"
         palceholder:默认提示信息
         required：表示用户必须输入一个值
         disabled:禁用文本框
         list：数据列表，要配合datalist标签使用-->
        单行文本框：<input type="text" maxlength="11"
                     size="30" placeholder="请输入用户名"
                     required list="username" name="name"/><!--单行文本框--><br/>
        <datalist id="username">
            <option>张三</option>
            <option>李四</option>
            <option>王五</option>
            <option>张王</option>
        </datalist>

        密码框：<input type="password" name="pwd"/><!--密码框-->

        <!--按钮-->
        <input type="button" value="普通按钮"/>
        <input type="reset" value="重置按钮"/>
        <input type="submit" value="提交按钮"/><br/>

        <!--上传文件-->
        <input type="file"/><br/>

        <!--隐藏文本框-->
        隐藏文本:<input type="hidden" /><br/>

        <!--多选框 checked:默认选中
                    required:该属性必须被选中-
                    当不加value属性时，数据在传递的过程中会将选中的值表示为on-->
        爱好：<input type="checkbox" name="aihao" value="dq"/>打球
        <input type="checkbox" name="aihao" value="pb" checked/>跑步
        <input type="checkbox" name="aihao" value="sj" required/>睡觉
        <input type="checkbox" name="aihao" value="dyx"/>打游戏
        <br/>

        <!--单选框-->
        性别：<input type="radio" name="sex" value="nan" checked/>男
        <input type="radio" name="sex" value="nv"/>女
        <br/>

        <!-- 数值框-->
        年龄：<input type="number" min="10" max="100" step="2" value="25"><br/>

        <!--数据验证：邮件-->
        邮箱地址：<input type="email"/><br/>
        电话：<input type="tel"/><br/>
        网址：<input type="url"/><br/>

        <button>提交数据</button>
        <button type="button">普通按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <br/>

        <!--下拉列表 optgroup用于给列表中内容分组，是不能选择的，label：组名-->
        学校：
        <select name="school">
            <optgroup label="山西">
                <option value="zhb">中北大学</option>
                <option value="lg">理工大学</option>
                <option value="kj">科技大学</option>
                <option value="cj">财经大学</option>
            </optgroup>
            <optgroup label="北京">
                <option value="qh">清华大学</option>
                <option value="bd">北京大学</option>
            </optgroup>
        </select>
        <br/>

        <!--多行文本  placeholder:占位提示，用于显示提示信息
            当textarea标签中间有内容时（包括空格），占位提示信息不再显示
            disabled:禁用单个控件-->
        <textarea cols="60" rows="8" placeholder="来坐第一个沙发吧。。。。" disabled></textarea>
        <br/>
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
	</table>
    </form>

</body>
</html>